import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test from './pages/Test'
export default function App() {
  return (
    <div>
      {/* Link的作用: 最终渲染一个a标签,会修改路径,但是不发送请求 */}
      <Link to="/home">home</Link>
      {/* <Link to="/login">login</Link> */}
      <Link to="/home/test">test</Link>
      <hr />
      {/* 路由组件要渲染到哪里,就把路由规则定义在哪里(只针对一级路由) */}
      {/* Routes的作用:监听路径变化,让对应的组件展示,其他组件隐藏 */}
      <Routes>
        {/* Route的作用: 配置前端路由规则 */}
        {/* <Route path="/home" element={<Home></Home>}></Route> */}
        {/* <Route path="/login" element={<Login></Login>}></Route> */}

        {/* 关于path,可以忽略/ */}
        {/* <Route path="home" element={<Home></Home>}></Route>
        <Route path="login" element={<Login></Login>}></Route> */}

        {/* 注意: Route组件可以不写element */}
        {/* <Route path="home"> */}
        {/* 注意: 如果Route中嵌套了route,并且路径使用了简写.则里面的path会自动和外面的path进行拼接. 外面的在前,里面的在后  ==> /home/aaa */}
        {/* <Route path="aaa" element={<Test></Test>}></Route>
        </Route> */}
        {/* 如果写了上面的代码,则起始相当于和下面的写法是一样的 */}
        {/* <Route path="/home/aaa" element={<Test></Test>}></Route> */}

        {/* 注意： 如果home不写element.则外面的Route其实就是和里面的Route的path拼接一下. 但是如果外面写了element.则外面的是一级路由,里面的是二级路由(嵌套路由) */}
        <Route path="home" element={<Home></Home>}>
          {/* 注意: 如果Route中嵌套了route,并且路径使用了简写.则里面的path会自动和外面的path进行拼接. 外面的在前,里面的在后  ==> /home/aaa */}
          <Route path="test" element={<Test></Test>}></Route>
        </Route>
        {/* 上面的代码,其实就是下面的代码 */}
        {/* <Route path="/home" element={<Home></Home>}>
          <Route path="/home/test" element={<Test></Test>}></Route>
        </Route> */}
      </Routes>
    </div>
  )
}
